<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue';
import AttributeQueryPopup from './AttributeQueryPopup.vue';
import { Query } from '@/api/mapgis-api/Query';
//引入ElMessage组件样式
import { ElMessage } from 'element-plus';
const { proxy } = getCurrentInstance();
const searchAccidentValue = ref('');

/* 设置搜索到的要素显示成标注 */
const icon_style = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 60],
    anchorOrigin: 'top-right',
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    offsetOrigin: 'top-right',
    // offset:[0,10],
    //图标缩放比例
    scale: 0.5,
    //透明度
    opacity: 0.75,
    //图标的url
    // src: '../src/assets/images/定位.png',
    src: new URL('@/assets/images/定位.png', import.meta.url).href,
  }),
});
const source_icon = new ol.source.Vector();
const layer_icon = new ol.layer.Vector({
  source: source_icon,
  style: icon_style,
}); // 标注图层

const querying = ref(false); // 跟踪查询状态
const popupInstance = ref(null); // 弹窗组件的实例
/* element-plus组件的alert消息提示 */
const open1 = () => {
  ElMessage({
    message: '查询成功',
    type: 'success',
    plain: true,
  });
};
const open2 = () => {
  ElMessage({
    message: '查询结果为空',
    type: 'warning',
    plain: true,
  });
};
const open4 = () => {
  ElMessage({
    message: '输入值不能为空',
    type: 'error',
    plain: true,
  });
};

// 组件挂载完成后,添加图层到地图
onMounted(() => {
  // 添加图层到地图
  proxy.$map.addLayer(layer_icon);
});

/* 搜索事件函数:*/
function handelSearch() {
  if (!searchAccidentValue.value.trim()) {
    open4(); // 输入框为空
    //如果不return,会查询到错误结果
    return;
  }
  // console.log(searchAccidentValue.value);
  /* 属性查询 */
  let service = {
    docName: import.meta.env.VITE_MAPGIS_DOC_NAME,
    layerId: 2,
  };
  let where = {
    key: '事件类型',
    // 这里传一个变量
    value: searchAccidentValue.value,
  };
  Query.queryByAttribute({
    service,
    where,
  }).then((features) => {
    // 封装的Query.js,返回值是搜索到的所有要素组成的数组
    // console.log(features);
    if (!features) {
      searchAccidentValue.value = '';
      open2(); // 查询失败
      return;
    }
    // 如果图层不存在，则创建图层,如果图层被创建,则切换数据源
    querying.value = true; // 重置查询状态
    source_icon.addFeatures(features);
    open1(); // 查询成功
  });
  //显示完标注之后,再清除输入框,否则查不到
  searchAccidentValue.value = ''; // 清空输入框
}
/* 取消查询函数,清除搜索结果标注 */
function handleCancelSearch() {
  layer_icon.getSource().clear();
  querying.value = false;
  popupInstance.value.closePopup(); // 子组件暴露的方法
  // console.log(popupInstance)
}
</script>

<template>
  <el-menu-item index="6" id="search">
    <AttributeQueryPopup :layer_icon="layer_icon" ref="popupInstance" />
    <input
      type="text"
      class="searchAccident"
      @keyup.enter="handelSearch"
      v-model.trim="searchAccidentValue"
      placeholder="请输入事件类型"
    />

    <!-- 模板中的响应式数据不需要 .value -->
    <button class="searchButton" @click="handelSearch" v-if="!querying">
      查 询
    </button>

    <button
      class="cancelSearchButton"
      @click="handleCancelSearch"
      v-if="querying"
    >
      取消查询
    </button>
  </el-menu-item>
</template>

<style lang="scss" scoped>
#search {
  margin-left: auto;
  margin-right: 200px;
  display: flex;
}
#search:hover {
  background-color: var(--el-menu-bg-color);
  color: var(--el-menu-bg-color);
  .searchAccident {
    border: 3px solid #ff2d51;
  }
}
.searchAccident {
  height: 35px;
  width: 150px;
  z-index: 1000;
  border-top-left-radius: 5px; /* 设置左上角圆角 */
  border-bottom-left-radius: 5px; /* 设置左下角圆角 */
  padding-left: 10px;
  border: 1px solid #bbb;
  outline: none; /* 移除轮廓 */
}
.searchButton {
  height: 35px;
  width: 100px;
  z-index: 1000;
  border: 1px solid #bbb;
  background: white;
  color: var(--el-menu-bg-color);
  border-top-right-radius: 5px; /* 设置右上角圆角 */
  border-bottom-right-radius: 5px; /* 设置右下角圆角 */
  font-size: 16px;
}
.cancelSearchButton {
  height: 35px;
  width: 100px;
  z-index: 1000;
  background: #ff2d51;
  color: white;
  border-top-right-radius: 5px; /* 设置右上角圆角 */
  border-bottom-right-radius: 5px; /* 设置右下角圆角 */
  border: none;
  font-size: 14px;
}
</style>
